<template>
  <div class="price-limit layout-content">
    <c-table
      :data="data"
      :columns="columns"
      :add="$btn('add')"
      addText="新增点价限制"
      @onAdd="add"
      @onReload="init"
      :scroll="{ y: '90vh' }"
    >
      <template slot="customerPrice" slot-scope="{ row }">
        <span v-if="row.customerPriceMinLimit"
          >不得比最新价低
          <i class="success bold">{{ row.customerPriceMinLimit }}</i> 元</span
        >
        <i v-if="row.customerPriceMaxLimit && row.customerPriceMinLimit">，</i>
        <span v-if="row.customerPriceMaxLimit"
          >不得比最新价高
          <i class="danger bold">{{ row.customerPriceMaxLimit }}</i> 元</span
        >
      </template>
      <div class="handle" slot="handle" slot-scope="{ row }">
        <c-button type="link" @click="edit(row)" v-if="$btn('edit')"
          >编辑</c-button
        >
        <a-popconfirm
          :title="`是否确认删除 ${row.categoryName} 的点价限制？`"
          @confirm="del(row)"
        >
          <c-button type="link" v-if="$btn('del')">删除</c-button>
        </a-popconfirm>
      </div>
    </c-table>
    <c-modal v-model="visible" :title="modalTitle" @ok="submit" destroyOnClose>
      <c-form
        v-model="form"
        ref="form"
        :rules="rules"
        :data="formData"
        :col="{ labelCol: { span: 9 }, wrapperCol: { span: 12 } }"
      >
        <template v-slot:category="{ change }">
          <c-category
            v-model="form.category"
            v-if="modalTitle === '新增点价限制'"
            @change="changeCategory(change)"
            :filterList="filterCategory"
          />
          <span v-else>{{ editRow.categoryName }}</span>
        </template>
      </c-form>
    </c-modal>
  </div>
</template>

<script>
import {
  getPricelimitList,
  addPricelimit,
  updatePricelimit,
  deletePricelimit
} from "@/api/company";
import { getCategoryId } from "@/util/common";

const columns = [
  {
    title: "品种",
    dataIndex: "categoryName",
    key: "categoryName"
  },
  {
    title: "客户点价限制",
    key: "customerPrice",
    scopedSlots: { customRender: "customerPrice" }
  },
  {
    title: "操作",
    key: "handle",
    scopedSlots: { customRender: "handle" }
  }
];

const formData = [
  {
    label: "点价品种",
    prop: "category",
    slot: "category"
  },
  {
    label: "客户点价不得比最新价低",
    prop: "customerPriceMinLimit"
  },
  {
    label: "客户点价不得比最新价高",
    prop: "customerPriceMaxLimit"
  }
];

export default {
  data() {
    return {
      data: [],
      columns: columns,
      visible: false,
      modalTitle: null,
      form: {
        category: [],
        customerPriceMinLimit: "",
        customerPriceMaxLimit: ""
      },
      formData: formData,
      editRow: {},
      rules: {
        category: [{ required: true, message: "请选择品种", trigger: "change" }]
      },
      filterCategory: []
    };
  },
  watch: {
    visible(val) {
      if (val && this.modalTitle === "新增点价限制") {
        this.form = {
          category: [],
          customerPriceMinLimit: "",
          customerPriceMaxLimit: ""
        };
      }
    }
  },
  methods: {
    add() {
      this.modalTitle = "新增点价限制";
      this.visible = true;
    },
    edit(row) {
      this.editRow = row;
      this.modalTitle = "编辑点价限制";
      this.visible = true;
      this.form.category = getCategoryId(row.categoryId);
      this.form.customerPriceMinLimit = row.customerPriceMinLimit;
      this.form.customerPriceMaxLimit = row.customerPriceMaxLimit;
    },
    changeCategory(val, fn) {
      console.log(val, fn);
    },
    submit() {
      this.$refs.form.validated().then(() => {
        let finish = () => {
          this.init();
          this.visible = false;
          this.$message.success("操作成功");
        };
        if (this.modalTitle === "新增点价限制") {
          let f = this.form;
          let params = {
            categoryId: f.category[1],
            categoryName: getCategoryId(f.category[1], {
              value: "categoryName"
            })[1],
            customerPriceMinLimit: f.customerPriceMinLimit,
            customerPriceMaxLimit: f.customerPriceMaxLimit
          };
          addPricelimit(params).then(() => {
            finish();
          });
        } else {
          let params = {
            id: this.editRow.id,
            ...this.form
          };
          delete params.category;
          updatePricelimit(params).then(() => {
            finish();
          });
        }
      });
    },
    // 删除点价限制
    del(row) {
      deletePricelimit({
        priceLimitId: row.id
      }).then(() => {
        this.init();
        this.$message.success("操作成功");
      });
    },
    init() {
      getPricelimitList().then(res => {
        this.data = res;
        // 过滤已添加的品种
        this.filterCategory = res.map(i => i.categoryId);
      });
    }
  },
  created() {
    this.init();
  }
};
</script>
